<template>
  <div class="container">
    <div class="userinfo">
      <img :src="userinfo.avatarUrl" alt="">
      <p>{{userinfo.nickName}}</p>
    </div>
    <YearProgress></YearProgress>

    <button v-if="openid" @click="scanBook" class="btn">添加图书</button>
    <button v-if="gologin" open-type="getUserInfo" lang="zh_CN" class='btn' @getuserinfo="getUserInfo">点击登录</button>
    <!-- <button style="width:60rpx;height:60rpx" open-type="getUserInfo" @getuserinfo="bindGetUserInfo"></button> -->
  </div>
</template>
<script>
import {showSuccess, post, showModal} from '@/util'
import YearProgress from '@/components/YearProgress'
export default {
  components: {
    YearProgress
  },
  data: function () {
    return {
      userinfo: {
        avatarUrl: 'http://image.shengxinjing.cn/rate/unlogin.png',
        nickName: '未登录'
      },
      gologin: false,
      openid: '',
      code: ''
    }
  },
  created () {
    this.authorize()
  },
  methods: {
    async addBook (isbn) {
      console.log(isbn)
      const res = await post('/weapp/addbook', {
        isbn,
        openid: wx.getStorageSync('openid')
      })
      console.log(res)
      showModal('添加成功', `${res.title}添加成功`)
    },
    scanBook () {
      // 允许从相机和相册扫码
      wx.scanCode({
        success: res => {
          if (res.result) {
            this.addBook(res.result)
          }
        }
      })
    },
    authorize () {
      var a = this
      wx.getSetting({
        // 查看是否授权
        success: function (res) {
          if (res.authSetting['scope.userInfo']) {
            wx.getUserInfo({
              success: function (res) {
                console.log(res)
                wx.setStorageSync('userinfo', res.userInfo)
                a.getOpenid()
              }
            })
          } else {
            a.gologin = true
          }
        }
      })
    },
    getUserInfo (e) {
      console.log(e)
      var a = this
      if (e.target.errMsg === 'getUserInfo:fail auth deny') {
        showModal('提示', '需要微信授权才能登录')
      } else if (e.target.errMsg === 'getUserInfo:ok') {
        wx.getUserInfo({
          success: function (res) {
            console.log(res)
            wx.setStorageSync('userinfo', res.userInfo)
            a.getOpenid()
          }
        })
      }
    },
    getOpenid () {
      var a = this
      wx.login({
        success: function (res) {
          a.code = res.code
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            data: {
              appid: 'wx89d2782876aff860',
              secret: 'f7a3d8288d8e9c01c2ee51f96904b98d',
              js_code: res.code,
              grant_type: 'authorization_code'
            },
            success: function (e) {
              a.gologin = false
              a.openid = e.data.openid
              a.userinfo = wx.getStorageSync('userinfo')
              wx.setStorageSync('openid', e.data.openid)
              showSuccess('登录成功')
              a.userLogin(a.userinfo, a.openid)
            },
            fail: function (error) {
              showModal('登录失败', error)
            }
          })
        }
      })
    },
    async userLogin (userinfo, openid) {
      const res = await post('/weapp/adduser', {
        openid,
        userinfo
      })
      console.log(res)
    }
  },
  onShow () {
    let userinfo = wx.getStorageSync('userinfo')
    let openid = wx.getStorageSync('openid')
    if (userinfo && openid) {
      this.userinfo = userinfo
      this.openid = openid
    }
  }
}
</script>
<style lang='scss'>
.container {
  padding: 0 30rpx;
  .userinfo {
    margin-top: 100rpx;
    text-align: center;
    img {
      width: 150rpx;
      height: 150rpx;
      margin: 20rpx;
      border-radius: 50%;
    }
  }
}
</style>
